<%--
  Created by IntelliJ IDEA.
  User: 86185
  Date: 2021/5/23
  Time: 20:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目的根路径
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        #zuidahezi {
            width: 400px;
            height: 340px;
            border: black 1px solid;
            margin: auto;
        }

        #doctorId .doctorid_id {
            width: 50px;
            height: 30px;
            /*border: black 1px solid;*/
            padding: 4px 4px 4px 4px;
            margin: 7px 5px 5px 18px;
            font-family: '黑体';
        }

        .update {
            width: 378px;
            height: 50px;
            /*border: #0bc9be 1px solid;*/
            position: relative;
            left: 20px;
            top: 16px;
        }

        .doctorName {
            width: 75px;
            height: 30px;
            /*border: #0bc9be 1px solid;*/
            margin: auto;
            padding: 9px 5px 3px 9px;
            font-size: 18px;
            font-family: '黑体';
        }

        #doctorId .doctorid_hezi .doctorid_input {
            width: 200px;
            height: 30px;
            /*border: #0bc9be 1px solid;*/
            border-bottom: rgba(175, 220, 255, 0.49) 1px solid;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            position: relative;
            top: -43px;
            right: -97px;
        }

        #doctorPwdyuan .doctorPwdyuan_pwd {
            width: 64px;
            height: 30px;
            /*border: black 1px solid;*/
            padding: 4px 4px 4px 4px;
            margin: 7px 5px 5px 18px;
            font-family: '黑体';
        }

        #doctorPwdyuan .doctorPwdyuan_hezi .doctorPwdyuan_input {
            width: 200px;
            height: 30px;
            /*border: #0bc9be 1px solid;*/
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            border-bottom: rgba(175, 220, 255, 0.49) 1px solid;
            position: relative;
            top: -43px;
            right: -97px;
        }

        #doctorPwdxin .doctorPwdxin_pwd {
            width: 64px;
            height: 30px;
            /*border: black 1px solid;*/
            padding: 4px 4px 4px 4px;
            margin: 7px 5px 5px 18px;
            font-family: '黑体';
        }

        #doctorPwdxin .doctorPwdxin_hezi .doctorPwdxin_input {
            width: 200px;
            height: 30px;
            /*border: #0bc9be 1px solid;*/
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            border-bottom: rgba(175, 220, 255, 0.49) 1px solid;
            position: relative;
            top: -43px;
            right: -97px;
        }

        #doctorPwdOk .doctorPwdOk_pwd {
            width: 80px;
            height: 30px;
            /*border: black 1px solid;*/
            padding: 4px 4px 4px 4px;
            margin: 7px 5px 5px 18px;
            font-family: '黑体';
        }

        #doctorPwdOk .doctorPwdOk_hezi .doctorPwdOk_input {
            width: 200px;
            height: 30px;
            /*border: #0bc9be 1px solid;*/
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            border-bottom: rgba(175, 220, 255, 0.49) 1px solid;
            position: relative;
            top: -43px;
            right: -97px;
        }

        span {
            font-family: '黑体';
        }

        #update .updateOk {
            width: 67px;
            height: 20px;
            border: 1px rgba(21, 158, 255, 0.49) solid;
            padding: 5px 5px 5px 40px;
            border-radius: 20px;
            background-color: rgba(21, 158, 255, 0.49);
            position: relative;
            left: 274px;
            bottom: -4px;
        }

        .updateNo span {
            width: 10px;
            height: 15px;
            /*border: darkgrey 1px solid;*/
            display: inline-block;
            padding: 6px 6px 6px 6px;
            position: relative;
            left: 376px;
            top: -1px;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
<div class="clickpwd">点我>修改密码</div>
<div id="zuidahezi" style="display: none">
    <div class="updateNo"><span>X</span></div>
    <%--    <form method="post" action="<%=basePath%>MedicineServlet">--%>
    <div class="doctorName">修改密码</div>
    <div id="doctorId" class="update">
        <div class="doctorid_id">卡号：</div>
        <div class="doctorid_hezi">
            <input type="text" name="doctorId" class="doctorid_input" value="123456" style="outline:none">
        </div>
    </div>
    <div id="doctorPwdyuan" class="update">
        <div class="doctorPwdyuan_pwd">原密码：</div>
        <div class="doctorPwdyuan_hezi">
            <input type="password" name="pwd" class="doctorPwdyuan_input" style="outline:none">
        </div>
    </div>
    <div id="doctorPwdxin" class="update">
        <div class="doctorPwdxin_pwd">新密码：</div>
        <div class="doctorPwdxin_hezi">
            <input type="password" name="pwdxin" class="doctorPwdxin_input" style="outline:none">
        </div>
    </div>
    <div id="doctorPwdOk" class="update">
        <div class="doctorPwdOk_pwd">确认密码：</div>
        <div class="doctorPwdOk_hezi">
            <input type="password" name="pwdok" class="doctorPwdOk_input" style="outline:none">
        </div>
    </div>
    <div id="update">
        <div class="updateOk">确定</div>
    </div>
    <%--    </form>--%>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        $(".updateNo").click(function () {
            $("#zuidahezi").hide();
        })

        $(".clickpwd").click(function () {
            $("#zuidahezi").show();
        })

        $("#update .updateOk").click(function () {
            $.ajax({
                url: "http://localhost:8080/com/MedicineServlet",
                data: {
                    xiugai: "xiugai",
                    doctorId: "123456",
                    doctorid_id: $(".doctorid_hezi .doctorid_input").val(),
                    doctorPwdyuan_pwd: $(".doctorPwdyuan_hezi .doctorPwdyuan_input").val(),
                    doctorPwdxin_pwd: $(".doctorPwdxin_hezi .doctorPwdxin_input").val(),
                    doctorPwdOk_pwd: $(".doctorPwdOk_hezi .doctorPwdOk_input").val()
                },
                type: "POST",
                dataType: "json",
                success: function (data) {

                }
            })
        })
    })
</script>
</body>
</html>
